<template>
  <div class="homework-list">
    <h2>课程作业</h2>
    <div v-if="homeworks.length" class="homework-grid">
      <div v-for="homework in homeworks" :key="homework.id" class="homework-card">
        <h3>{{ homework.title }}</h3>
        <p>{{ homework.description }}</p>
        <div class="homework-details">
          <span>截止日期：{{ formatDate(homework.deadline) }}</span>
          <span>满分：{{ homework.maxScore }}</span>
        </div>
        <div class="homework-actions">
          <router-link :to="`/homeworks/${homework.id}/submit`" class="btn">
            提交作业
          </router-link>
        </div>
      </div>
    </div>
    <p v-else>暂无作业</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { homeworkService } from '@/services/homework.service'
import { Homework } from '@/types/homework'

const props = defineProps({
  courseId: {
    type: String,
    required: true
  }
})

const homeworks = ref<Homework[]>([])

onMounted(async () => {
  try {
    homeworks.value = await homeworkService.getHomeworksByCourse(props.courseId)
  } catch (error) {
    console.error('获取作业列表失败', error)
  }
})

const formatDate = (date: Date) => {
  return new Date(date).toLocaleDateString()
}
</script>

<style scoped>
.homework-list {
  padding: 20px;
}

.homework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.homework-card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
}

.homework-details {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 0.9em;
  color: #666;
}

.homework-actions {
  text-align: center;
}

.btn {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 8px 15px;
  text-decoration: none;
  border-radius: 4px;
}
</style>